﻿<template>
  <div>
    <el-dialog  v-drag :title = 'dialogSelectTitle' :visible.sync = 'dialogSelectVisible' width = '55%' :before-close = "handleClose">
      <!-- 显示功能列表部分 -->
      <div v-if = 'showFunc'>
        <!-- 表格部分 -->
        <div class = 'page_tableContent'>
          <el-table :data = 'table.tableData' :header-cell-class-name = 'handlemyclass' highlight-current-row @current-change = "handleCurrentChange"
          style = 'width:100%' stripe border row-key = 'functionno' v-loading = 'loading' ref = 'myTable'>
            <el-table-column :align = "index === 0 ? '' : 'center'" v-for = '(item, index) in table.tableColumn' :key = 'item.indexName' :label = 'item.text'>
              <template slot-scope = 'scope'>
                <span>{{scope.row[item.indexName]}}</span>
              </template>
            </el-table-column>
            <el-table-column label = "操作" align = "center" width = '106px'>
              <template slot-scope = "scope">
                <el-button type = 'text' @click.stop = "handleAdd(scope.row)"><i class = 'iconfont icon-add'></i>添加子菜单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class = 'page_bottomContent'>
          <div class = 'page_btnsContent'>
            <el-button type = "primary" @click = 'handleAdd (null)'>添加菜单</el-button>
            <el-button type = "primary" @click = "handleClose">关 闭</el-button>
          </div>
        </div>
      </div>
      <!-- 显示编辑菜单的部分 -->
      <div v-else>
        <el-form :model = "ruleMenuForm" ref = "ruleMenuForm" :label-width = 'labelMenuWidth' :rules = 'rulesMenu'>
          <el-form-item label = "功能编号：" prop='son_selfNo' v-if = 'hadParent'>
            <el-row>
              <el-col :span = "11">
                <el-form-item>
                  <el-input v-model = "ruleMenuForm.son_parentNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item>
                  <el-input :disabled='isEdit' v-model="ruleMenuForm.son_selfNo" placeholder="请输入子功能编号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="功能编号：" prop='functionNo' v-if='!hadParent'>
            <el-input v-model='ruleMenuForm.functionNo' placeholder="请输入功能编号" :disabled='isEdit'></el-input>
          </el-form-item>
          <el-form-item label='功能名称：' prop='functionName'>
            <el-input v-model='ruleMenuForm.functionName' placeholder="请输入功能名称"></el-input>
          </el-form-item>
          <el-form-item label='功能链接：'>
            <el-input v-model='ruleMenuForm.functionUrl' disabled></el-input>
          </el-form-item>
          <el-form-item label='授权码：'>
            <el-input v-model='ruleMenuForm.action' disabled></el-input>
          </el-form-item>
          <el-form-item label='图标名称：' v-if='!hadParent'>
            <el-input v-model='ruleMenuForm.icon' placeholder="请输入图标名称"></el-input>
          </el-form-item>
          <el-form-item label='链接target：'>
            <el-radio-group v-model="ruleMenuForm.targetType" :disabled = "ruleMenuForm.urlType === 'Router'">
              <el-radio label="_blank">新窗口打开</el-radio>
              <el-radio label="_self">当前窗口打开</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label='排序编号：'>
            <el-input v-model='ruleMenuForm.sortnum' placeholder="请输入排序编号"></el-input>
          </el-form-item>
          <el-form-item label="是否展示：">
            <el-radio-group v-model="ruleMenuForm.functionShow">
              <el-radio label="展示在菜单栏"></el-radio>
              <el-radio label="不展示在菜单栏"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功能类型：">
            <el-radio-group v-model="ruleMenuForm.urlType">
              <el-radio label="Router" :disabled="hadParent">站内路由</el-radio>
              <el-radio label="URI" :disabled="hadParent">外站链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item class='form_noLeftMargin'>
            <el-button type='info' @click="resetForm ('ruleMenuForm')">取 消</el-button>
            <el-button type="primary" @click="submitForm ('ruleMenuForm', isEdit)">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['menuDialog', 'functionObj'],
  data () {
    return {
      table: {
        tableData: [],
        tableColumn: [
          {
            text: '功能名称',
            indexName: 'functionname'
          },
          {
            text: '功能编号',
            indexName: 'functionno'
          }
        ]
      },
      dialogSelectVisible: false,
      dialogSelectTitle: '',
      loading: true,
      totalFuncs: [],
      showFunc: true,
      // 添加或者编辑时的弹窗
      hadParent: true,
      ruleMenuForm: {
        son_parentNo: '',
        son_selfNo: '',
        functionNo: '',
        functionName: '',
        functionUrl: '',
        functionShow: '不展示在菜单栏',
        sortnum: '',
        action: '',
        urlType: 'Router',
        icon: '',
        targetType: '_blank'
      },
      labelMenuWidth: '94px',
      pNo: '',
      fId: '',
      isEdit: '',
      isShow: false,
      rulesMenu: {
        functionNo: [
          {required: true, message: '功能编号不能为空', trigger: 'blur'}
        ],
        son_selfNo: [
          {required: true, message: '功能编号不能为空', trigger: 'blur'}
        ],
        functionName: [
          {
            required: true, message: '功能名称不能为空', trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 表头添加一个className
    handlemyclass (row) {
      if (row.column.label === '功能名称') {
        return 'uniqHead'
      }
    },
    // 获取所有的功能
    getFunctions () {
      this.$get('/function').then((data) => {
        this.loading = false
        if (data.data.result) {
          this.totalFuncs = data.data.result
          // 将数据结构转化为树形结构
          this.table.tableData = this.$toTree(data.data.result, true)
          this.$refs.myTable.clearSelection()
        }
      })
    },
    // 添加子菜单时
    handleAdd (row) {
      this.showFunc = false
      this.isEdit = false
      this.ruleMenuForm.functionName = this.functionObj.funcName
      if (this.functionObj.from === 's_table') {
        // 动态功能设定生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/s_table?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'dynamicMenu') {
        // 动态表单生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'dynamicMenu_v2') {
        // 动态表单v2生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicMenu_v2?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'workflowMenu') {
        // 动态流程页面生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicWorkflowMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'metaDynamicMenu') {
        // 元数据页面生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/metaDynamicMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'metaWorkflowMenu') {
        // 元数据流程页面生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/metaWorkflowMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'biMenu') {
        // bi页面生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/biDashboardMenu?uid=' + this.functionObj.funcUid
      }
      this.ruleMenuForm.action = this.functionObj.funcAuth
      this.ruleMenuForm.sortnum = ''
      this.ruleMenuForm.functionShow = '展示在菜单栏'
      this.ruleMenuForm.icon = ''
      this.ruleMenuForm.targetType = '_blank'
      if (row) {
        this.hadParent = true
        this.ruleMenuForm.son_parentNo = row.functionno
        this.ruleMenuForm.son_selfNo = ''
        this.ruleMenuForm.urlType = row.url_type
      } else {
        this.hadParent = false
        this.ruleMenuForm.functionNo = ''
        this.ruleMenuForm.urlType = 'Router'
      }
    },
    // 表格单选
    handleCurrentChange (row) {
      this.showFunc = false
      this.isEdit = true
      this.ruleMenuForm.functionName = this.functionObj.funcName
      if (this.functionObj.from === 's_table') {
        this.ruleMenuForm.functionUrl = '/dashboard/s_table?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'dynamicMenu') {
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'dynamicMenu_v2') {
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicMenu_v2?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'workflowMenu') {
        this.ruleMenuForm.functionUrl = '/dashboard/dynamicWorkflowMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'metaDynamicMenu') {
        this.ruleMenuForm.functionUrl = '/dashboard/metaDynamicMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'metaWorkflowMenu') {
        this.ruleMenuForm.functionUrl = '/dashboard/metaWorkflowMenu?uid=' + this.functionObj.funcUid
      } else if (this.functionObj.from === 'biMenu') {
        // bi页面生成的菜单
        this.ruleMenuForm.functionUrl = '/dashboard/biDashboardMenu?uid=' + this.functionObj.funcUid
      }
      this.ruleMenuForm.action = this.functionObj.funcAuth
      this.ruleMenuForm.sortnum = row.sortnum
      this.ruleMenuForm.urlType = row.url_type
      this.ruleMenuForm.icon = row.icon
      this.ruleMenuForm.targetType = row.targetType
      this.checkParent(row)
      if (row.is_menu) {
        this.ruleMenuForm.functionShow = '展示在菜单栏'
      } else {
        this.ruleMenuForm.functionShow = '不展示在菜单栏'
      }
    },
    // 判断是否有父级菜单
    checkParent (row) {
      if (row.p_functionno) {
        this.hadParent = true
        this.ruleMenuForm.son_parentNo = row.p_functionno
        this.ruleMenuForm.son_selfNo = row.functionno.slice(row.p_functionno.length)
        this.ruleMenuForm.urlType = row.url_type
      } else {
        this.hadParent = false
        this.ruleMenuForm.functionNo = row.functionno
      }
    },
    // 点击上部的X关闭弹窗时
    handleClose () {
      if (!this.showFunc) {
        this.$refs.ruleMenuForm.clearValidate()
        this.showFunc = true
      }
      this.$emit('giveUpFunc')
    },
    // 提交表单前获取数据
    getInputData () {
      if (this.hadParent) {
        this.fId = this.ruleMenuForm.son_parentNo + this.ruleMenuForm.son_selfNo
        this.pNo = this.ruleMenuForm.son_parentNo
      } else {
        this.fId = this.ruleMenuForm.functionNo
        this.pNo = ''
      }
      if (this.ruleMenuForm.functionShow === '展示在菜单栏') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // 提交编辑的方法
    submitEdit () {
      this.getInputData()
      this.$patch('/function/' + this.fId, {
        function_name: this.ruleMenuForm.functionName,
        function_url: this.ruleMenuForm.functionUrl,
        action: this.ruleMenuForm.action,
        sortnum: this.ruleMenuForm.sortnum,
        url_type: this.ruleMenuForm.urlType,
        icon: this.ruleMenuForm.icon,
        target: this.ruleMenuForm.targetType,
        is_menu: this.isShow,
        p_function_no: this.pNo
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.$message({
            message: '生成功能菜单成功',
            type: 'success'
          })
          this.showFunc = true
          this.$emit('giveUpFunc')
        } else {
          this.$message.error(data.data.result.msg)
        }
      })
    },
    // 提交新增的方法
    submitAdd () {
      this.getInputData()
      this.$post('/function', {
        function_no: this.fId,
        function_name: this.ruleMenuForm.functionName,
        function_url: this.ruleMenuForm.functionUrl,
        action: this.ruleMenuForm.action,
        sortnum: this.ruleMenuForm.sortnum,
        url_type: this.ruleMenuForm.urlType,
        icon: this.ruleMenuForm.icon,
        target: this.ruleMenuForm.targetType,
        is_menu: this.isShow,
        p_function_no: this.pNo
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.$message({
            message: '生成功能菜单成功',
            type: 'success'
          })
          this.showFunc = true
          this.$emit('giveUpFunc')
        } else {
          this.$message.error(data.data.result.msg)
        }
      })
    },
    // 点击弹窗的确定按钮
    submitForm (forms, submitType) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          if (submitType) {
            this.submitEdit()
          } else {
            this.submitAdd()
          }
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].resetFields()
      this.showFunc = true
      // this.$emit('giveUpFunc')
    }
  },
  watch: {
    menuDialog: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (val) {
          // 将数据还原
          this.loading = true
          this.dialogSelectTitle = '生成功能菜单'
          this.getFunctions()
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang='scss'>
.table_toggleBtn {
  display: inline-block;
  width: 18px;
  height: 100%;
  margin-left: 20px;
  cursor: pointer;
  i{
    font-size:18px;
    vertical-align: -1px;
  }
}
.table_trSpace {
  display: inline-block;
  width: 22px;
  height: 10px;
}
</style>
